<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{border: 1px solid;
			height: 600;
			background-image: url(img/纸.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: fixed;
			}
		</style>
	</head>
<body>
	<canvas id="myCanvas" width="900px" height="610px" >		
		</canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			ctx.fillStyle="#A25E0E";			
			ctx.fillRect(400,400,240,260);
			
			ctx.fillStyle="#A25E0E";
			ctx.lineTo(400,400);
			ctx.lineTo(640,400);
			ctx.lineTo(520,280);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			ctx.closePath();
			
			ctx.beginPath();
			ctx.arc(800,100,50,0,2*Math.PI);
		
			ctx.closePath();
			
		    ctx.fillStyle="yellow"
			ctx.fill();
			
			ctx.beginPath();
			ctx.arc(800,80,50,0,2*Math.PI);
			
			ctx.closePath();
		
		    ctx.fillStyle="#3D444C"
			ctx.fill();
			
			ctx.beginPath();
			ctx.fillStyle="#DECB89"
			ctx.fillRect(500,500,80,160);
			
			ctx.beginPath();
			ctx.fillStyle="DECB89"
			ctx.fillRect(420,420,50,50);
			
			ctx.fillStyle="lightsteelblue"
			ctx.lineTo(345,345);
			ctx.lineTo(375,375);
			
		</script>
	</body>
